<template>
    <div class="cvu-preview">
        <cvu-modal ref="modal"
            :show="show"
            :title="files.length && files[index].name ? files[index].name : ''"
            :hide-footer="true"
            @on-close="handleClose"
            @on-visible="handleVisible"
        >
            <Carousel 
                v-model="index"
                :loop="files.length > 1"
                :autoplay="config.autoplay"
                :autoplay-speed="config.autoplaySpeed"
                :dots="config.dots"
                :radius-dot="config.radiusDot" 
                :trigger="config.trigger" 
                :arrow="config.arrow"
            >
                <CarouselItem v-for="(item, i) in files" :key="i">
                    <div class="item-warp">
                        <img :src="item.url" alt="">
                    </div>
                </CarouselItem>
            </Carousel>
        </cvu-modal>
    </div>
</template>
<script>
export default {
    name: 'cvu-preview',
    props: {
        // 是否显示
        show: {
            type: Boolean,
            default: false
        },
        // 当前显示索引
        currentIndex: {
            type: Number,
            default: 0
        },
        // 图片文件地址集合 [{ url: '', name: '' }]
        files: {
            type: Array,
            default() {
                return []
            }
        }
    },
    data() {
        return {
            index: 0,
            config: {
                autoplay: false,
                autoplaySpeed: 2000,
                dots: 'inside',
                radiusDot: false,
                trigger: 'click',
                arrow: 'hover'
            }
        }
    },
    watch: {
        currentIndex(newIndex) {
            this.index = newIndex
        }
    },
    methods: {
        // 关闭
        handleClose() {
            this.$emit('on-close')
        },
        // 显示隐藏监听
        handleVisible(e) {
            this.$emit('on-visible', { code: e.code })
        }
    }
}
</script>
<style lang="scss" scoped>
    @import '../../../style/_index.scss';
    .cvu-preview{
        width: 100%;
    }
    /deep/.cvu-modal-content{
        padding-top: 15px !important;
    }
    /deep/.ivu-carousel-list{
        width: 60vw !important;
        height: 70vh !important;
    }
    /deep/.ivu-carousel-dots li button{
        background: $primary-orange;
    }
    .item-warp{
        position: relative;
        width: 60vw;
        height: 70vh;
        overflow: hidden;
        img{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 100%;
        }
    }
</style>